Robust Ressourceindlæsning i React: Behersk Fejlgrænser med Hooks

I moderne webapplikationer er asynkron indlæsning af ressourcer en almindelig praksis. Uanset om det er hentning af data fra et API, indlæsning af billeder eller import af moduler, er håndtering af potentielle fejl under ressourceindlæsning afgørende for en gnidningsfri brugeroplevelse. React Error Boundaries (Fejlgrænser) giver en mekanisme til at fange JavaScript-fejl hvor som helst i deres underordnede komponenttræ, logge disse fejl og vise en fallback-brugergrænseflade i stedet for at lade hele applikationen gå ned. Denne artikel udforsker, hvordan man effektivt bruger Error Boundaries i kombination med React Hooks til at håndtere fejl ved ressourceindlæsning.

Forståelse af Fejlgrænser (Error Boundaries)

Før React 16 ville uhåndterede JavaScript-fejl under komponent-rendering ødelægge Reacts interne tilstand og forårsage kryptiske fejl ved efterfølgende renderings. Error Boundaries løser dette ved at fungere som catch-all-blokke for fejl, der opstår i deres underordnede komponenter. De er React-komponenter, der implementerer enten den ene eller begge af de følgende livscyklusmetoder:

• static getDerivedStateFromError(error): Denne statiske metode påkaldes, efter en fejl er blevet kastet af en underordnet komponent. Den modtager den kastede fejl som argument og returnerer en værdi for at opdatere komponentens tilstand.
• componentDidCatch(error, info): Denne livscyklusmetode påkaldes, efter en fejl er blevet kastet af en underordnet komponent. Den modtager den kastede fejl som argument samt et objekt, der indeholder information om, hvilken komponent der kastede fejlen. Du kan bruge den til at logge fejlinformation.

Vigtigt er, at Error Boundaries kun fanger fejl i renderingsfasen, i livscyklusmetoder og i konstruktører i hele træet under dem. De fanger ikke fejl for:

• Hændelseshåndterere (event handlers) (lær mere i afsnittet nedenfor)
• Asynkron kode (f.eks. setTimeout eller requestAnimationFrame callbacks)
• Server-side rendering
• Fejl, der kastes i selve Error Boundary-komponenten (i stedet for dens børn)

Fejlgrænser og React Hooks: En Stærk Kombination

Mens klassekomponenter traditionelt blev brugt til at implementere Error Boundaries, tilbyder React Hooks en mere koncis og funktionel tilgang. Vi kan oprette en genanvendelig useErrorBoundary hook, der indkapsler fejlhåndteringslogikken og giver en bekvem måde at wrappe komponenter, der kan kaste fejl under ressourceindlæsning.

Oprettelse af en Brugerdefineret useErrorBoundary Hook

Her er et eksempel på en useErrorBoundary hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Forklaring:

• useState: Vi bruger useState til at håndtere fejltilstanden. Den sætter oprindeligt fejlen til null.
• useCallback: Vi bruger useCallback til at memoize funktionerne resetError og captureError. Dette er god praksis for at forhindre unødvendige re-renders, hvis disse funktioner videregives som props.
• ErrorBoundary Komponent: Dette er en funktionel komponent oprettet med useCallback, der tager children og en valgfri fallback prop. Hvis der findes en fejl i tilstanden, render den enten den angivne fallback-komponent eller en standardfejlmeddelelse. Ellers render den sine børn. Dette fungerer som vores Fejlgrænse. Afhængighedsarrayet `[error]` sikrer, at den re-render, når `error`-tilstanden ændres.
• captureError Funktion: Denne funktion bruges til at sætte fejltilstanden. Du vil kalde denne inden i en try...catch-blok, når du indlæser ressourcer.
• resetError Funktion: Denne funktion rydder fejltilstanden, hvilket giver komponenten mulighed for at re-render sine børn (og potentielt forsøge at indlæse ressourcen igen).

Implementering af Ressourceindlæsning med Fejlhåndtering

Lad os nu se, hvordan man bruger denne hook til at håndtere fejl ved ressourceindlæsning. Overvej en komponent, der henter brugerdata fra et API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry